<template>
  <div class="">
    <header class="mui-bar mui-bar-nav">
      <a class=" mui-icon  mui-pull-left  arr_left" @tap="close_address_view">
      </a>
      <h1 class="mui-title">收货地址</h1>
      <a class="mui-pull-right  right_icon" @tap="open_add_address_view">
        <img src="../../assets/images/address_03.png" @tap="open_add_address_view">
      </a>
    </header>
    <div class="mui-content" style="">
      <div>
        <div class="hr_20"></div>
        <div class="address_list" v-for="(item,i) in address_lists" :key="i">
          <div class="address_item">
            <div class="title">
              <span class="name" v-html="item.name">{{item.name}}</span>
              <span class="phone" v-html="item.phone">{{item.phone}}</span>
            </div>
            <div class="text">{{item.province}}{{item.city}}{{item.area}}{{item.address}}</div>
            <div class="btns">
              <span @tap="set_default_address(i)" :class="item.default?'is_default default_active fl':'is_default fl'">
                  <i class="fl"></i>
                  <span class="fl">默认地址</span>
              </span>
              <span class="del fr" @tap="del_address(i)">
                <i class="fl"></i>
                <span class="fl">删除</span>

              </span>
              <span class="edit fr" @tap="open_edit_address_view(i)">
                <a>
                    <!--<a href="my_adsbj.html">-->
                    <i class="fl"></i>
                    <span class="fl">编辑</span>
                </a>
              </span>

            </div>
          </div>
          <div class="hr_20"></div>
        </div>
        <img src="../../assets/images/my_bianji.png">

      </div>
    </div>

  </div>
</template>

<script>
  import address_ajax from '../../ajax/address_ajax';
  import ls from '../../tools/localstorage'
  export default {
    name: 'select_area',
    data() {
      return {
        user: '',
        address_lists: [],
      };
    },
    methods: {
      // 关闭地址界面
      close_address_view() {
        console.log(111)
        this.$store.commit("open_address_view", false)
      },
      // 打开添加地址窗口
      open_add_address_view() {
        console.log(1)
        this.$store.commit("open_address_add",true)
      },
      // 删除地址
      del_address(k) {
        let uaid = this.address_lists[k].uaid
        mui.confirm("确定删除吗？", "温馨提示", ['确定', '取消'], e => {
          if (e.index == 0) {
            // 删除操作
            address_ajax.del_address({
              uaid: uaid
            }, res => {
              if (res) {
                mui.toast("删除成功");
                this.get_address_list()
              }
            })
          } else {
            mui.toast("取消删除")
          }
        })
      },
      // 打开编辑地址窗口
      open_edit_address_view(k) {
        var address = this.address_lists[k]
        ls.set('edit_address_info',address)
        this.$store.commit("open_address_edit",true);

      },
      // 获取地址列表
      get_address_list() {
        address_ajax.get_address_list({
          uid: this.$store.state.account.user_info.uid
        }, res => {
          this.address_lists = res;
        })
      },
      // 设置当前为默认地址
      set_default_address(k){
        let uaid = this.address_lists[k].uaid
        address_ajax.set_default_address({
          uid:this.$store.state.account.user_info.uid,
          uaid:uaid
        },res=>{
          if(res){
            mui.toast("设置成功");
            this.get_address_list()
          }
        })
      }
    },
    created() {
      // 获取地址列表
      this.get_address_list()
    },
    mounted() {

    },
    computed:{
      address_data_has_change(){
        return this.$store.state.address.address_change_num
      }
    },
    watch:{
      address_data_has_change:function () {
        this.get_address_list()
      }
    }
  }
</script>


<style lang="less" scoped>
  @import "../../../static/pxvalue.less";
  @import "../../assets/less/my/address_list.less";

  .mui-bar-nav a {
    font-size: 0.5973rem;
    color: #888888;
    line-height: 44px;
  }

  .right_icon {
    width: 24px;
    height: 24px;
    margin-top: 8px;
    img {
      width: 24px;
    }
  }
</style>
